<template>
  <div>
    <div class="app">
      <Header></Header>
      <div class="home-hero-container container">
        <div class="home-hero">
          <div class="nav-category">
            <ul class="site-category-list">
              <li>
                <a href="#">手机 电话卡</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">电视 盒子</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">笔记本 显示器 平板</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">家电 插线板</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">出行 穿戴</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">智能 路由器</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">电源 配件</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">健康 儿童</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">耳机 音箱</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
              <li>
                <a href="#">生活 箱包</a>
                <span class="site-category-list-right iconfont">&#xe6a2;</span>
              </li>
            </ul>
          </div>
          <div class="swiper-container home-hero-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="javascript:void(0);" @click="toContent">
                  <img
                    src="./products/banner_img01.webp"
                    v-if="i === 0 "
                    alt
                    :style="{opacity: n}"
                    id="banner-img"
                    class="opacity"
                  />
                  <img
                    src="./products/banner_img02.jpg"
                    v-else-if="i === 1 || i === -4"
                    alt
                    class="opacity"
                    :style="{opacity: n}"
                    id="banner-img"
                  />
                  <img
                    src="./products/banner_img03.webp"
                    v-else-if="i === 2 || i === -3"
                    alt
                    class="opacity"
                    :style="{opacity: n}"
                    id="banner-img"
                  />
                  <img
                    src="./products/banner_img04.webp"
                    v-else-if="i === 3 || i === -2"
                    alt
                    class="opacity"
                    :style="{opacity: n}"
                    id="banner-img"
                  />
                  <img
                    src="./products/banner_img05.webp"
                    v-else-if="i === 4 || i === -1"
                    alt
                    class="opacity"
                    :style="{opacity: n}"
                    id="banner-img"
                  />
                </a>
              </div>
              <div
                class="swiper-button-prev iconfont"
                id="prev"
                role="button"
                @click="clickLeft"
              >&#xe6db;</div>
              <div
                class="swiper-button-next iconfont"
                id="next"
                role="button"
                @click="clickRight"
              >&#xe6a2;</div>
              <div class="swiper-pagination">
                <ul>
                  <li @click="click1">1</li>
                  <li @click="click2">2</li>
                  <li @click="click3">3</li>
                  <li @click="click4">4</li>
                  <li @click="click5">5</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="home-hero-sub">
            <div class="span4">
              <ul class="home-channel-list clearfix">
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./images/home-channel-list-miaosha.png" alt />
                    小米秒杀
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./images/home-channel-list-tuangou.png" alt />
                    企业团购
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./images/home-channel-list-f.png" alt />
                    F码通道
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./images/home-channel-list-mifen.png" alt />
                    米粉卡
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./images/home-channel-list-huanxin.png" alt />
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./images/home-channel-list-huafei.png" alt />
                    话费充值
                  </a>
                </li>
              </ul>
            </div>
            <div class="span16">
              <ul class="home-promo-list clearfix">
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./products/banner2_img01.jpg" alt />
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./products/banner2_img02.jpg" alt />
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" @click="toContent">
                    <img src="./products/banner2_img03.jpg" alt />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="page-main home-main">
        <div class="container">
          <div class="home-flashsale">
            <div class="box-hd">
              <h2 class="title">小米闪购</h2>
            </div>
            <div class="box-bd clearfix">
              <div class="flashsale-countdown">
                <div class="round">10:00 场</div>
                <img
                  src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII="
                  alt="小米闪购"
                />
                <div class="desc">距离结束还有</div>
                <div class="countdown clearfix">
                  <span id="houses">{{hours}}</span>
                  <i>:</i>
                  <span id="minutes">{{minutes}}</span>
                  <i>:</i>
                  <span id="scconds">{{seconds}}</span>
                </div>
              </div>
              <div class="flashsale-list">
                <ul>
                  <li class style="width: 234px; margin-right: 14px; border-top-color: darkcyan;">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="content">
                        <div class="thumb">
                          <img src="./products/shanbuy04.jpg" alt />
                        </div>
                        <h3 class="title">空调（大1匹/三级能效）</h3>
                        <p class="desc">出众静音，快速制冷热</p>
                        <p class="price">
                          <span>1499</span>元
                          <del>1799元</del>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li style="width: 234px; margin-right: 14px; border-top-color: darkblue;">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="content">
                        <div class="thumb">
                          <img src="./products/shanbuy01.jpg" alt />
                        </div>
                        <h3 class="title">米家直流变频落地扇 白色</h3>
                        <p class="desc">用科技创造自然风</p>
                        <p class="price">
                          <span>309</span>元
                          <del>349元</del>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li style="width: 234px; margin-right: 14px;border-top-color: saddlebrown;">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="content">
                        <div class="thumb">
                          <img src="./products/shanbuy06.jpg" alt />
                        </div>
                        <h3 class="title">柚家湿巾 （三盒装） 白色</h3>
                        <p class="desc">75%酒精，有效清洁杀菌</p>
                        <p class="price">
                          <span>39</span>元
                          <del>59元</del>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li style="width: 234px; border-top-color: aqua;">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="content">
                        <div class="thumb">
                          <img src="./products/shanbuy07.jpg" alt />
                        </div>
                        <h3 class="title">小米手表Color 典雅黑</h3>
                        <p class="desc">1540种出彩搭配，潮我看齐</p>
                        <p class="price">
                          <span>749</span>元
                          <del>799元</del>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="home-banner-box">
            <a href="javascript:void(0);" @click="toContent">
              <img src="./products/Redmi 10X pro.webp" alt width="1226" height="120" />
            </a>
          </div>
          <div class="home-brick-box">
            <div class="box-hd">
              <h2 class="title">手机</h2>
              <div class="more">
                <a href="#" class="more-link">
                  查看全部
                  <i class="iconfont">&#xe688;</i>
                </a>
              </div>
            </div>
            <div class="box-bd clearfix">
              <div class="span4">
                <ul class="brick-promo-list clearfix">
                  <li class="brick-item brick-item-l">
                    <a href="javascript:void(0);" @click="toContent">
                      <img src="./products/Phone_banner_img01.webp" alt />
                    </a>
                  </li>
                </ul>
              </div>
              <div class="span16">
                <ul class="brick-list clearfix">
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img02.webp" alt />
                      </div>
                      <h3 class="title">小米10 青春版 5G</h3>
                      <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                      <p class="price">
                        <span class="num">2099</span>元
                        <span>起</span>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img03.webp" alt />
                      </div>
                      <h3 class="title">小米10</h3>
                      <p class="desc">骁龙865/1亿像素相机</p>
                      <p class="price">
                        <span class="num">3999</span>元
                        <span>起</span>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img04.webp" alt />
                      </div>
                      <h3 class="title">Redmi K30 Pro</h3>
                      <p class="desc">双模5G，骁龙865，弹出全面屏</p>
                      <p class="price">
                        <span class="num">2999</span>元
                        <span>起</span>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img05.webp" alt />
                      </div>
                      <h3 class="title">Redmi K30 Pro 变焦版</h3>
                      <p class="desc">双模5G，骁龙865，弹出全面屏</p>
                      <p class="price">
                        <span class="num">3799</span>元
                        <span>起</span>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img06.webp" alt />
                      </div>
                      <h3 class="title">小米10 Pro</h3>
                      <p class="desc">骁龙865 / 50倍变焦</p>
                      <p class="price">
                        <span class="num">4399</span>元
                        <span>起</span>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img07.webp" alt />
                      </div>
                      <h3 class="title">Redmi K30</h3>
                      <p class="desc">120Hz流速屏，全速热爱</p>
                      <p class="price">
                        <span class="num">4399</span>元
                        <span>起</span>
                        <del>1699元</del>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img08.webp" alt />
                      </div>
                      <h3 class="title">Redmi K30 5G</h3>
                      <p class="desc">双模5G，120Hz流速屏</p>
                      <p class="price">
                        <span class="num">1899</span>元
                        <span>起</span>
                        <del>2299元</del>
                      </p>
                    </a>
                  </li>
                  <li class="brick-item">
                    <a href="javascript:void(0);" @click="toContent">
                      <div class="figure-img">
                        <img src="./products/Phone_banner_img09.webp" alt />
                      </div>
                      <h3 class="title">Redmi 8</h3>
                      <p class="desc">5000mAh超长续航</p>
                      <p class="price">
                        <span class="num">799</span>元
                        <span>起</span>
                        <del>899元</del>
                      </p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </div>
    <div class="home-tool-bar home-tool-bar-small">
      <a href="#" class="item icon-1">
        <em class="icon iconfont">&#xe68e;</em>
        <div class="pop-content">
          <img src="./images/erweima.png" alt />
          <span class="desc">扫码领取新人百元礼包</span>
        </div>
      </a>
      <a href="#" class="item icon-1">
        <em class="icon iconfont">&#xe657;</em>
      </a>
      <a href="#" class="item icon-1">
        <em class="icon iconfont" style="font-size: 30px;">&#xe625;</em>
      </a>
      <a href="#" class="item icon-2">
        <em class="icon iconfont">&#xe646;</em>
      </a>
      <a href="#" class="item icon-1">
        <em class="icon iconfont">&#xe602;</em>
      </a>
      <a
        href="#"
        id="back-top"
        class="item"
        style="margin-top: 15px;"
        @click="backTop"
        v-show="showToTop"
      >
        <em class="icon iconfont">&#xe63a;</em>
      </a>
    </div>
  </div>
</template>

<script>
import { timeOut } from '@/components/common/countDown.js'

import Footer from '@/components/content/HomeFooter/HomeFooter.vue'
import Header from '@/components/content/HomeHeader/HomeHeader.vue'
export default {
  components: {
    Footer,
    Header
  },
  data() {
    return {
      // 轮播图
      i: 0,
      // 倒计时
      hours: '00',
      minutes: '00',
      seconds: '00',
      // 滚动条的高度
      scrollTop: 0,
      showToTop: false,
      n: 0.2
    }
  },
  watch: {
    scrollTop(val) {
      // console.log(this.scrollTop)
      if (this.scrollTop >= 200) {
        this.showToTop = true
      } else {
        this.showToTop = false
      }
    }
  },
  created() {},
  mounted() {
    this.handleTime()
    let time = null
    // let timer = null
    time = setInterval(() => {
      if (this.n === 1) {
        clearInterval(time)
      }
      this.n += 0.2
    }, 200)
    this.n = 0.2
    setInterval(() => {
      this.navTime()
    }, 3000)
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleTime() {
      const _that = this
      requestAnimationFrame(function fn() {
        _that.time()
        requestAnimationFrame(fn)
      })
    },
    // 倒计时
    time() {
      const time = timeOut('2020-08-30 24:00:00')
      this.hours = time.slice(3, 5)
      this.minutes = time.slice(6, 8)
      this.seconds = time.slice(9, 11)
    },
    // 轮播图左点击
    clickLeft() {
      this.i--
      if (this.i === -5) {
        this.i = 0
      }
    },
    clickRight() {
      this.i++
      if (this.i === 5) {
        this.i = 0
      }
    },
    navTime() {
      // if (this.i === 0) {
      //   this.n = 1
      // }
      this.i++
      let time = null
      // let timer = null
      time = setInterval(() => {
        if (this.n === 1) {
          clearInterval(time)
        }
        this.n += 0.2
      }, 200)
      this.n = 0.2
      if (this.i === 5) {
        this.i = 0
      }
    },
    click1() {
      this.i = 0
    },
    click2() {
      this.i = 1
    },
    click3() {
      this.i = 2
    },
    click4() {
      this.i = 3
    },
    click5() {
      this.i = 4
    },
    // 保存滚动值，这是兼容的写法
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (this.scrollTop >= 200) {
        this.showToTop = true
      }
    },

    // 滚动条回到顶部
    backTop() {
      let timer = null
      const _that = this
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        if (_that.scrollTop > 0) {
          _that.scrollTop -= 100
          document.body.scrollTop = document.documentElement.scrollTop =
            _that.scrollTop
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
          _that.showToTop = false
        }
      })
    },
    // 去内容页面
    toContent() {
      this.$router.push('/home/content')
    }
  }
}
</script>
<style scoped>
@import './css/base.css';
@import './css/header.css';
@import './css/index.css';
@import './css/footer.css';

/* .opacity {
  opacity: 0;
} */
</style>
